<template>
  <div class="m-login center-block">
    <div class="m-login-header">
      <svgicon color="#409EFF" height="100%" name="logo" width="150" />
    </div>
    <div class="m-login-form">
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="account">
          <el-input
            autocomplete="off"
            placeholder="用户名"
            v-model="loginForm.account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passwd">
          <el-input
            @keyup.enter.native="doLogin"
            autocomplete="off"
            placeholder="密码"
            type="password"
            v-model="loginForm.passwd"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="doLogin" style="width: 100%" type="primary"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { delCookie } from "@/utils/cookie";

export default {
  data() {
    return {
      loginForm: {
        account: null,
        passwd: null
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "none" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "none" }
        ],
        passwd: [
          { required: true, message: "请输入密码", trigger: "none" },
          { min: 3, max: 25, message: "长度在 3 到 25 个字符", trigger: "none" }
        ]
      }
    };
  },
  mounted() {
    delCookie("identity_token");
  },
  methods: {
    doLogin() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          let loadingInstance = this.$loading({ fullscreen: true });
          this.$ajax.profile
            .profile_login(this.loginForm.account, this.loginForm.passwd)
            .then(result => {
              if (result.code !== 1) {
                this.$message({
                  message: result.msg,
                  type: "warning"
                });
              } else {
                this.$router.push("/");
              }
            })
            .finally(function() {
              loadingInstance.close();
            });
        }
      });
    }
  }
};
</script>
